<template>
  <div class="main">
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <div class="header">
            <span @click="backToPrv">
              <i class="imgIcon"></i>
            </span>
            <span class="title">升学规划报告</span>
          </div>
          <div class="mainDiv">
            <div class="mainImage"><img src="https://static.shengxue985.com/sxzx_wechat/images/report.png" alt=""></div>
            <div class="watchBtn" @click="handleWatchSxPlanReport">查看升学规划报告</div>
          </div>
        </div>
      </scroller>
      <BuyVip :xBuy="showBuyVip" :returnUrl="returnUrl" serverName="点击升学规划" @handleCloseBuyDialog="handleCloseBuyDialog"></BuyVip>
    </div>
  </div>         
</template>

<script>
import ls from "store2";
import { getReportHistory } from "~/api/colleges";
import { backAppOrWx } from "~/common/common";
import BuyVip from '~/components/BuyVip'
export default {
  components: {
    BuyVip
  },
  data() {
    return {
      showBuyVip: false,
      returnUrl: null,
    }
  },
  created() {
    this.commonJs.accectAppParame();
  },
  mounted() {
    this.$visit(this.$route.path)
    this.$getVip()
    this.returnUrl = '/wx-yxk/#' + this.$route.fullPath
    ls.remove('isHistory')
    ls.remove('jumpFromReport')
  },
  methods: {
    handleCloseBuyDialog() {
      this.showBuyVip = false
    },
    backToPrv() {
      backAppOrWx()
    },
    // 查看升学规划报告
    handleWatchSxPlanReport() {
      this.getHistoryRecordList()
    },
    // 获取历史记录集合
    getHistoryRecordList() {
       let isVipstrs = sessionStorage.getItem("isVipStr")
        if (isVipstrs.indexOf("升学规划")>-1) {
          this.$loading('open')
          getReportHistory({ userType: ls.get('userType') }).then(res => {
            const arr = res.data.filter(x => x.generate == 1)
            if (arr.length == 0) {
              this.$vux.toast.text('您还没有生成升学规划报告，请先生成！')
              this.$router.push({
                path: './indexs?back=true'
              })
            } else {
              ls.set('jumpFromReport', true)
              const jumpId = arr[0].id
              this.goto('./result', jumpId)
            }
          }).finally(() => {
            this.$hideLoading()
          })
        } else {
          this.showBuyVip = true
          this.$hideLoading()
        }    
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .header {
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    padding: 0 0.32rem;
    background: transparent;
    text-align: center;
    z-index: 100;

    .imgIcon {
      float: left;
      margin-top: 0.24rem;
      width: 0.4rem;
      height: 0.4rem;
       display:block;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
    background-size:3rem 2.4rem; 
    }

    .title {
      color: #222;
      font-size: 0.36rem;
      font-weight: bold;
      text-align: center;
      height: 0.88rem;
    }
  }

  .mainDiv {
    padding: 0.54rem 0.64rem;
    .mainImage {
      width: 100%;
      height: auto;
      margin-bottom: 1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .watchBtn {
      width: 100%;
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 0.44rem;
      background: @mainColor;
      text-align: center;
      font-size: 0.3rem;
      color: #fff;
      font-weight: bold;
    }

  }
}  
</style>
